<template>
    <div>
        食谱名称: <input type="text" v-model="cond.name">&ensp;
        分类: <select v-model="cond.tid">
            <option value="0">请选择</option>
            <option v-for="value in type" :value="value.tid">{{ value.tname }}</option>
        </select>&ensp;
        <input type="button" value="查询" @click="getdata">
        <table class="table table-hover">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>食谱名称</td>
                    <td>食谱封面</td>
                    <td>标签</td>
                    <td>分类</td>
                    <td>食谱描述</td>
                    <td>食谱状态</td>
                    <td>添加时间</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="value in book" :key="value.fid">
                    <td>{{ value.fid }}</td>
                    <td>{{ value.fname }}</td>
                    <td><img :src="value.fimg" style="width: 100px;height: 100px;"></td>
                    <td>{{ value.fbiao ? "低盐" : "低糖" }}</td>
                    <td>{{ value.tname }}</td>
                    <td>{{ value.fdesc }}</td>
                    <td>{{ value.fstate ? "已发布" : "未发布" }}</td>
                    <td>{{ moment(value.fcreate).format("yyyy-MM-DD") }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
    onMounted(()=>
    {
        getdata()
        tid()
    })
    import axios from 'axios';
    import moment from 'moment';
    import { onMounted, ref } from 'vue';
    let type: any = ref([{}]);
    let book: any = ref
    ([
        {
            "fid": 0,
            "fname": "",
            "fimg": "",
            "fbiao": true,
            "tid": 0,
            "tname": "",
            "fdesc": "",
            "fstate": true,
            "fcreate": ""
        }
    ])
    let cond = ref
    ({
        name:null,
        tid:null
    })
    const tid = () => 
    {
        axios
        ({
            url: "https://localhost:7080/api/FoodBookType/GetAllType",
            method: "get"
        })
        .then((res) => 
        {
            console.log(res);
            type.value = res.data;
        })
        .catch((err) => 
        {
            console.log(err);
        })
    }
    const getdata = () =>
    {
        axios
        ({
            url:"https://localhost:7080/api/FoodBook/GetAllBooks",
            method:"get",
            params:cond.value
        })
        .then((res)=>
        {
            console.log(res);
            book.value=res.data
        })
        .catch((err)=>
        {
            console.log(err);
        })
    }
</script>

<style lang="scss" scoped>

</style>